<div ng-init="vm.init();refresh();">
  <div class="row x-page-header">
    <div class="col-md-12">
      <div class="x-page-title">MOCK数据编辑</div>
      <div class="pull-right">
        <div class="btn-group x-copy-list">
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
              ng-disabled="vm.node.name == ''">复制 <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><button id="copy" class="btn btn-default btn-block" data-clipboard-action="copy"
                ng-disabled="!vm.node.leaf">数据</button></li>
            <li class="divider"></li>
            <li><button class="btn btn-default btn-block" ng-click="vm.copyMock('file')"
                ng-disabled="!vm.node.leaf">文件</button></li>
            <li><button class="btn btn-default btn-block" ng-click="vm.copyMock('folder')"
                ng-disabled="vm.node.leaf">文件夹</button></li>
          </ul>
        </div>
        <a id="file-url" href="javascript:void(0)" target="_blank">
          <button class="btn btn-success" ng-disabled="vm.node.name == ''">打开链接地址</button></a>
      </div>
    </div>
  </div>
  <div class="row x-page-body">
    <div class="col-md-4">
      <fieldset>
        <legend>文件列表</legend>
        <div class="x-page-scope">
          <div class="x-tree">
            <div class="input-group x-tree-filter">
              <input type="text" class="form-control" ng-model="vm.filter" ng-change="vm.filterTree()"
                  placeholder="文件夹/文件名">
              <span class="input-group-btn">
                <button class="btn btn-default" ng-click="vm.collapseAll()"><i class="fa fa-plus"></i></button>
                <button class="btn btn-default" ng-click="vm.expandAll()"><i class="fa fa-minus"></i></button>
                <button class="btn btn-default" ng-click="vm.refresh()"><i class="fa fa-refresh"></i></button>
              </span>
            </div>
            <ul id="mock-tree" class="ztree"></ul>
          </div>
        </div>
      </fieldset>
    </div>
    <div class="col-md-8">
      <fieldset>
        <legend>文件数据<font color="green">（支持：/**/注释、<a href="javascript:void(0)" class="x-link"
            ng-click="vm.showShortcutKey()">编辑常用快捷键</a>）</font></legend>
        <div class="x-page-scope" ng-class="{'x-full-screen': vm.fullScreen}" ng-show="vm.textMock != ''">
          <div class="x-editor">
            <pre class="pretty-json" id="json-editor"></pre>
          </div>
        </div>
      </fieldset>
    </div>
  </div>
  <script type="text/ng-template" id="editor-tools">
    <div class="x-editor-tool btn-group">
      <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <i class="fa fa-font"></i><span class="caret"></span>
        </button>
        <ul class="dropdown-menu x-font-list">
          <li ng-repeat="size in [8, 9, 10, 12, 14, 16]" ng-click="vm.setFontSize(size)"
              ng-class="{'active': size == vm.fontSize}"><a href="javascript:void(0)">{{size}}px</a></li>
        </ul>
      </div>
      <button class="btn btn-default" ng-click="vm.showSearchbox()" ng-disabled="!vm.searchboxClosed">
          <i class="fa fa-search"></i></button>
      <button class="btn btn-default" ng-click="vm.save()" ng-disabled="!(vm.state.enabled && vm.state.changed)">
          <i class="fa fa-save"></i></button>
      <button class="btn btn-default" ng-click="vm.fullScreen = !vm.fullScreen">
          <i class="fa" ng-class="{'fa-compress': vm.fullScreen, 'fa-expand': !vm.fullScreen}"></i></button>
    </div>
    <div class="x-editor-tool x-goto-top hidden">
      <button type="button" class="btn btn-default btn-circle btn-lg" ng-click="vm.gotoTop()">
        <i class="fa fa-arrow-up"></i></button>
    </div>
  </script>
</div>
